<template>
  <div class="about">
    <el-card class="about-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <span>关于我们</span>
        </div>
      </template>
      <div class="card-content">
        <el-row :gutter="20">
          <el-col :span="12">
            <div class="about-section">
              <h3>公司简介</h3>
              <p>我们是一家专注于前端技术开发的创新公司，致力于提供高质量的Web应用解决方案。</p>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="about-section">
              <h3>技术栈</h3>
              <el-tag v-for="tech in technologies" :key="tech" style="margin-right: 10px; margin-bottom: 10px;">
                {{ tech }}
              </el-tag>
            </div>
          </el-col>
        </el-row>
        
        <el-divider />
        
        <el-row :gutter="20">
          <el-col :span="24">
            <div class="about-section">
              <h3>团队成员</h3>
              <el-table :data="teamMembers" style="width: 100%">
                <el-table-column prop="name" label="姓名" width="180" />
                <el-table-column prop="position" label="职位" width="180" />
                <el-table-column prop="skill" label="专长" />
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const technologies = ref([
  'Vue 3', 'TypeScript', 'Element Plus', 'Vite', 'Pinia', 'Vue Router'
])

const teamMembers = ref([
  { name: '张三', position: '前端架构师', skill: 'Vue.js, React, Node.js' },
  { name: '李四', position: 'UI/UX设计师', skill: 'Figma, Sketch, Adobe XD' },
  { name: '王五', position: '全栈工程师', skill: 'JavaScript, Python, Django' }
])
</script>

<style scoped>
.about {
  padding: 20px;
}

.about-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-content {
  padding: 10px 0;
}

.about-section {
  margin-bottom: 20px;
}

.about-section h3 {
  margin-bottom: 15px;
  color: #409EFF;
}
</style>